<template>
  <div style="position: relative">
    <div style="position: absolute;overflow: hidden">
      <img src="../../../assets/images/index_bg.png" style="width: 100%;">
    </div>
    <div style="position: absolute;width: 95%;left:0;right:0;margin: auto;top:60px;">
      <div class="info">
        <div class="info-img">
          <img :src="company.head_url||company.supplyHeadUrl">
        </div>
        <div class="info-text">
          <h4>{{company.company_name||company.supplyCompanyName}}</h4>
          <p v-if="isShow"><i class="iconfont icon-dizhi"></i>
            <span>{{address}}</span> <span>{{company.detailed_address}}</span> </p>
        </div>
      </div>
      <div class="detail">
        <div class="detail-text">
          <p><i class="iconfont icon-wode"></i>{{company.contacts||company.supplyContacts}}</p>
          <p><i class="iconfont icon-dianhua1"></i>{{company.mobile||company.supplyMobile}} {{company.tel||company.supplyTel}}</p>
          <p><i class="iconfont icon-youxiang1"></i>{{company.email||company.supplyEmail}}</p>
        </div>
      </div>
      <div v-if="none" style="padding-top:50px;line-height:20px;font-size:0.8rem;text-align:center;color:#999;">该店铺暂无商品</div>
      <div class="goods" v-if="!none">
        <div class="goods-item-title">
          <span class="title">商品列表</span>
          <!--<span class="more">更多 <i class="iconfont icon-xiayiye"></i></span>-->
        </div>
        <div class="goods-text">
          <ul>
            <li class="search-item" v-for="(item,index) in list" :key="index" @click="showDetail(item)">
              <div class="item-text">
                <div class="item-img" @click="showDetail(item)">
                  <img :src="config1.fileUrl+item.imgList[0].img_url">
                </div>
                <p @click="showDetail(item)">{{item.goods_name}}</p>
                <div class="item-tip">
                  <span>销量：{{item.sales_num}}</span>
                  <!--<i class="iconfont icon-dianpu" @click="toShop(item)"></i>-->
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="isShowDetail" height="100%">
        <vTitle page="3" @transferUser="back1" v-bind:title="'商品详情'"></vTitle>
        <vDetail v-if="isShowDetail" v-bind:goodsId="goodsId" v-bind:state="isShowDetail"></vDetail>
      </popup>
    </div>
  </div>
</template>

<script>
  import { Popup } from 'vux'
  import vTitle from './Title'
  import vDetail from './Detail'
  export default {
    name: "",
    components: {
      vTitle, vDetail, Popup
    },
    props:['text','type'],
    created(){
      let id = this.type==0?this.text.supply_id:this.type==1?this.text.id:this.type==2?this.text.supply_id:this.text.supplyId
      this.getCompany(this.text)
      this.getStoreGoods(id)
    },
    data () {
      return {
        list:[],
        company:{},
        address:'',
        isShow:false,
        none:false,
        isShowDetail:false
      }
    },
    methods:{
      // 查看商品详情
      showDetail(item){
        this.isShowDetail = true
        this.goodsId = item.id
      },
      back1(msg){
        this.isShowDetail = msg
      },
      // 根据商家id查询商品
      getStoreGoods(supplyId){
        this.$vux.loading.show();
        this.config1.get('/purchasers/app/goods/findGoodsBySypplyId', {
          start:1,
          supplyId: supplyId,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            if(res.data.page.list.length==0){
              this.none = true
              return;
            }
            this.none = false
            this.list = res.data.page.list
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 显示商家信息
      getCompany(text){
        if(this.type==0||this.type==2){
          this.$vux.loading.show();
          this.config1.get('/purchasers/app/supply/findSupplyByName', {
            start:1,
            supplyName: text.company_name||text.supplyCompanyName||text.purchasersCompanyName,
          }).then(res=>{
            this.$vux.loading.hide();
            if(res.data.code==='0'){
              $.each(res.data.page.list,(index,v)=>{
                if(v.id==text.supply_id){
                  this.company = v
                  this.getAddress(v)
                }
              })
            }else{
              this.msg(this.config1.handleError(res.data));
            }
          })
        }else{
          this.company = text
          this.getAddress(text)
        }
      },
      getAddress(company){
        let obj = {}
        if(this.type==3){
          obj = {
            province_id:company.supplyProvince,
            city_id:company.supplyCity,
            area_id:company.supplyArea
          }
        }else{
          obj = {
            province_id:company.province_id,
            city_id:company.city_id,
            area_id:company.area_id
          }
        }
        this.getP(obj)
        this.getC(obj)
        this.getA(obj)
        this.isShow = true
      },
      // 信息提示
      msg(str){
        this.$vux.toast.show({
          type: 'text',
          text: str,
          position: 'default',
          time: 800,
        });
      },
      getP(obj){
        this.$vux.loading.show();
        this.config1.post('/common/address/getProvinces', {id:obj.province_id}).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.address += res.data.obj.province + ' '
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      getC(obj){
        this.$vux.loading.show();
        this.config1.post('/common/address/getCitis', {
          id:obj.city_id,
          provinceid:obj.province_id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.address += res.data.obj.city + ' '
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      getA(obj){
        this.$vux.loading.show();
        this.config1.post('/common/address/getAreas', {
          id: obj.area_id,
          cityid:obj.city_id,
          provinceid:obj.province_id,
        }).then(res=>{
          this.$vux.loading.hide();
          if(res.data.code==='0'){
            this.address += res.data.obj.area + ' '
          }else{
            this.msg(this.config1.handleError(res.data));
          }
        })
      },
      // 完成
      getD(){
        if(this.address.prov&&this.address.city&&this.address.area){
          this.detailAddress = this.address.prov + this.address.city + this.address.area + this.company.detailed_address
          return
        }else{
          this.getD
        }
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../../assets/css/font_975465_4qn59qnejbp/iconfont.css";
  .index-bg{
    position: fixed;
    top:0;
  }
  .detail{
    width: 100%;
    margin: 2rem auto 1rem;
    .detail-text{
      background: #fff;
      padding:0.5rem 0.8rem;
      box-shadow: 0 0 6px #bdbdbd;
      border-radius: 5px;
      p{
        line-height:2rem;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.8rem;
        color:#666;
        text-overflow:ellipsis;
        .iconfont{
          color:#33bb99;
          padding-right: 0.5rem;
          font-size: 1rem;
        }
      }
    }
  }
  .info{
     height:50px;
     padding:0 0.5rem;
    .info-img{
      height:50px;
      width:50px;
      border-radius: 50%;
      border:3px #aeffeb solid;
      float: left;
      overflow: hidden;
      img{
        height:100%;
        width:100%;
      }
    }
    .info-text{
      float: left;
      width: 70%;
      color:#fff;
      h4{
        line-height:25px;
        padding-left: 1rem;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
      }
      p{
        line-height:25px;
        padding-left: 1rem;
        font-size:0.8rem;
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow:ellipsis;
      }
    }
  }
  .goods-item-title{
    padding: 0 0.5rem;
    font-size:0.8rem;
    line-height:2rem;
    color:#000;
  .title{
    border-left:2px #33bb99 solid;
    font-weight: 700;
    line-height:20px;
    padding-left: 7px;
    display: inline-block;
    /*float: left;*/
  }
  .more{
    float: right;
    color:#33bb99;
    display: inline-block;
  }
  }
  .goods-text{
    clear: both;
  .search-item{
    width: 50%;
    margin: 0.5rem 0;
    display: inline-block;
  .item-text{
    width: 93%;
    background: #fff;
    margin:0 auto;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 8px #e1e1e1;
    line-height: 2rem;
  .item-img{
    height:150px;
  img{
    height:100%;
    width:100%;
  }
  }
  p{
    font-size: 0.8rem;
    display: block;
    white-space: nowrap;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    text-overflow:ellipsis;
  }
  .item-tip{
    padding:0 0.5rem;
  .iconfont{
    color:#33bb99;
    float: right;
  }
  span{
    color: #999;
    font-size: 0.6rem;
  }
  }
  .item-address{
    font-size: 0.6rem;
    display: block;
    line-height:1.5rem;
    white-space: nowrap;
    /*width: 90%;*/
    /*margin: 0 auto;*/
    overflow: hidden;
    text-overflow:ellipsis;
  .iconfont{
    color:#33bb99;
    padding:0 0.2rem 0 0.3rem;
  }
  }
  }
  }
  }
</style>
